
<template>
  <div class="home_box" ref="home_box">
    <div class="header">
      <ai-header-pc />
    </div>

    <!-- <trans :lang="lang" /> -->
    <trans-new />

    <div class="footer">
      <!-- 蒙ICP备17006003号-1 -->
      蒙ICP备16003110号-1
    </div>
  </div>
</template>

<script>
  import AiHeaderPc from '../components/header/AiHeaderPc.vue'
  import AiHeaderMobileVue from '../components/header/AiHeaderMobile.vue';
  import AiHeaderMobile from '../components/header/AiHeaderMobile.vue';

  import Trans from './Trans.vue';
  import TransNew from './TransNew.vue';

  export default {
    name: 'Home',
    components: {
      AiHeaderPc,
      AiHeaderMobileVue,
      AiHeaderMobile,
      Trans,
      TransNew
    },
    data() {
      return {
        lang: 'ch',
        currentWidth: null,
        isShowMobileHeader: false,
      }
    },
    created() {
      window.addEventListener("resize", this.screenWidth);
    },
    mounted () {
      this.screenWidth()
    },
    destroyed() {
      window.removeEventListener("resize", this.screenWidth);
    },
    methods: {
      screenWidth() {
        this.currentWidth = this.$refs.home_box?.offsetWidth;
        this.isShowMobileHeader = this.currentWidth <= 991 ? true : false  
      },
    }
  }
</script>

<style lang="less" scoped>
  .home_box {
    position: relative;
    width: 100%;
    // height: calc(100% - 180px);
    height: 100%;
    background-color: #eee;

    .header {
      width: 100%;
      height: 100px;
    }

    .main_content {
      width: 100%;
      height: calc(100% - 160px);

      .tab-pane { 
        height: 100%;
        position: relative;
      }
    }

    .footer {
      width: 100%;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: #999;
      background-color: #dcdfe6;

      position: absolute;
      left: 0;
      bottom: 0;
    }
  }

  @media screen and (min-width: 1800px) {
    .home_box {  }
  }

  @media screen and (min-width: 1200px) and (max-width: 1400px) {
    .home_box {  }
  }

  @media screen and (max-width: 991px) {
    .home_box {  }
  }
</style>
